<template>
  <div class="w-full h-10 flex justify-between items-center hover:text-xl hover:bg-blue-200 select-none cursor-pointer"
       :class="[$props.value===selectvalue2?'text-red-500':'']"
       @click.stop.prevent="dianji($props.value)">
    <slot>
      <div>{{$props.label}}</div>
    </slot>
  </div>
</template>

<script>
import {defineComponent, watch, inject, computed} from "vue";

export default defineComponent({
  name:"goption",
  props:{
    label:{
      default:"label",
    },
    value:{
      default:"value",
    },
  },
  setup(prop,context){
    const shangchuan=()=>{
      context.emit("ready",{label:prop.label,value:prop.value})
    }
    const dianji =(jieguo)=>{
      context.emit("click",prop.value)
      clickfunc && clickfunc(jieguo)
    }
    watch(()=>prop,()=>{
      shangchuan()
    })
    const selectvalue = inject("selectvalue")
    const clickfunc = inject("clickfunc")

    const selectvalue2 = computed(()=>{
      return selectvalue.value
    })
    // 初始化区域
    shangchuan()
    return {
      dianji,selectvalue2
    }
  },
})
</script>

<style scoped>

</style>
